<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue demo1</title>
	<script src="lib/vue.min.js"></script>

</head>
<body>
	<div id="calc">
		<h1>{{ message }}</h1>
		<input type="text" id="num-x" v-model="numx" v-on:change="add"> + 
		<input type="text" id="numy" v-model:value="numy" > = 
		{{result}}
	</div>

	<hr>
	<div id="c">
		{{message}}
	</div>

	<script>
		/*
		Vue实例,构造器模式
		可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器：
		Vue.js 组件其实都是被扩展的 Vue 实例。
		*/
		var v = new Vue({
			el: "#calc",
			data: {
				numx: 1, 
				numy: 1, 
				result: 2,
				message: "vue demo1"
			},
			methods: {
				add: function() {
					console.log("add fun")
					this.result = this.numx + this.numy;
				}
			}
		});

		/*
		属性与方法
		*/
		var data = { message: "vue message" };
		var v2 = new Vue({
			el: "#c",
			data: data
		});
		v2.message === data.message; // true
		// v2设置新值为影响data的值，反之亦然
		v2.message = "new message"; // data.message -> new message
		data.message = "data new message"; // v2.message -> data new message

		// 已$暴露的属性
		v2.$data === data; // true
		v2.$el === document.getElementById("c") // true

		v2.$watch("message", function(newVal, oldVal){
			console.log("change %s to %s", oldVal, newVal);
		});
		// 改变v2.message
		v2.$data.message = "message2";

	</script>
</body>
</html>